<template>
  <div class="course-chart-room-container">

    <div class="box">

      <div class="view">
        <span style="color: #F00;font-weight: bold">
          【{{ courseInfo.courseDetailName }}】
        </span>
        当前有&nbsp;
        <span style="color: #000;font-weight: bold">
          {{ webSocketMsg.onLineNum }}
        </span>
        &nbsp;人加入了聊天室
      </div>

      <div class="text">
        <div class="panel-discuss" ref="discuss" id="discuss">

          <div v-for="(obj,i) in msgList" :class="{'msg-box':true,'my-msg-box ':obj.userId==userId}">

            <div class="head-portrait" style="margin-top:6px;cursor: pointer;">
              <Avatar shape="square"
                      :size="46"
                      icon="ios-person"
                      :src="obj.headPortraitUrl"/>
            </div>

            <div class="msg">
              <div class="nickName">
                {{ obj.userNickName }}
              </div>
              <div class="msg-text">
                {{ obj.msg }}
              </div>
            </div>
          </div>

        </div>

        <div class="split" @mousedown="mousedown"></div>

        <div class="panel-my">
          <Input v-model.trim="myMsg"
                 type="textarea"
                 :autosize="{minRows: 5,maxRows: 99}"
                 placeholder="加入讨论"
                 @on-enter="send"
                 style="width: 100%"/>
          <Button @click="send">提交</Button>
          - 文字提取超链接
          - 获得window剪切板 粘贴图片
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "CourseChartRoom",
  props: {},
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      courseInfo: {},
      courseDetailId: "",
      msgList: [],    //消息列表
      myMsg: "",
      webSocketMsg: {
        courseId: "",
        headPortraitUrl: "",
        msg: "",
        onLineNum: 0,
        url: "",
        userId: "",
        userNickName: "",
      },
    }
  },
  //计算属性
  computed: {
    userId() {
      return this.$store.getters.getUserId;
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    //发送我的言论
    send() {
      if (this.myMsg == "") {
        return
      }
      let userInfo = this.$store.getters.getUserInfo;
      let data = {
        userId: userInfo.userId,
        userNickName: userInfo.userNickName,
        headPortraitUrl: userInfo.headPortraitUrl,

        msg: this.myMsg
      }
      this.myMsg = ""
      this.axios.post(`/notice/course/${this.courseDetailId}/${this.userId}`, data)
          .then((data) => {

          })
    },
    //调整面板上下高度
    mousedown() {

    },
    //滚动条到最底部
    toFooter() {
      // let e = document.getElementById("discuss");
      // e.scrollTop = e.scrollHeight;
      this.$nextTick(()=>{
        this.$refs.discuss.scrollTop = this.$refs.discuss.scrollHeight
      })
    },
    //查询信息
    selectCourseDetailByCourseDetailId(courseDetailId) {
      this.axios.get(`/course/web/course-detail/${courseDetailId}`)
          .then((data) => {
            this.courseInfo = data.data
          })
    },
    websocket() {
      let _this = this;
      let websocket = null;
      //#################  判断浏览器是否支持 Websocket  ###################
      if ('WebSocket' in window) {
        websocket = new WebSocket(`ws://localhost:2003/websocket/${this.courseDetailId}/${this.userId}`);
      } else {
        alert("您的浏览器不支持websocket,请先升级");
      }
      //#################################################################


      websocket.onopen = function (event) {
        // console.log("连接成功后的回调函数");
      }

      websocket.onerror = function (event) {
        // console.log("连接失败后的回调函数");
      }

      //处理服务器推送过来的信息
      websocket.onmessage = function (event) {
        // console.log("服务器推送过来的消息");
        let msg = JSON.parse(event.data);
        _this.webSocketMsg = msg;
        if(_this.webSocketMsg.courseId!=-1){
          _this.msgList.push(msg);
        }

        //滚动条到最底部
        _this.toFooter();
      }

      websocket.onclose = function (event) {
        // console.log("连接关闭后的回调函数");
      }
    },
  },
  //钩子函数
  mounted() {
    //获取课程id
    let query = this.$route.query;
    this.courseDetailId = query.cd_id;
    //查询课程信息
    this.selectCourseDetailByCourseDetailId(this.courseDetailId);
    //滚动条到最底部
    this.toFooter();

    this.websocket();
  }
}
</script>

<style lang="less" scoped>
.course-chart-room-container {
  background-color: #FFF;

  .box {
    display: flex;
    flex-direction: column;
    //min-width: 1200px;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    min-height: calc(100vh - 70px);
    padding-top: 10px;

    .view {
      display: flex;
      min-height: 40px;
      align-items: center;

      padding-left: 6px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #FFF;
      box-shadow: 0px 0px 2px 1px #999;
    }

    .text {
      //margin-top: 14px;
      margin-bottom: 16px;
      flex-grow: 2;
      display: flex;
      flex-direction: column;

      background-color: #F5F5F5;
      box-shadow: 0px 0px 2px 1px #999;


      .panel-discuss {
        flex-grow: 7;
        padding-bottom: 20px;
        //background-color: #00F;
        height: calc(50vh * 0.4 - 200px * 0.4);
        overflow: auto;

        /*消息盒子*/

        .msg-box {
          padding-left: 16px;
          margin-top: 14px;
          display: flex;


          .msg {
            max-width: 70%;
            margin-left: 10px;

            .nickName {
              color: #777;
            }

            .msg-text {
              padding: 6px 10px;
              color: #000;
              margin-top: 4px;
              border-radius: 4px;
              background-color: #FFF;
              width: -moz-fit-content;
              display:inline-block;
            }
          }
        }

        /*我的发言*/

        .my-msg-box {
          flex-direction: row-reverse;
          padding-right: 16px;
          margin-top: 14px;

          .msg {
            margin-right: 10px;
            max-width: 70%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .nickName {
              text-align: right;
              color: #777;
            }

            .msg-text {
              padding: 6px 10px;
              color: #000;
              margin-top: 4px;
              border-radius: 4px;
              background-color: #FFF;
            }
          }
        }
      }

      .split {
        height: 0px;
        border: 1px solid #ccc;
        cursor: n-resize;
      }

      .panel-my {
        flex-grow: 3;
        background-color: #FFF;

        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }
  }
}
</style>